<template>
    <div>
        <el-row>
            <!-- <el-col :span="2"><div style="line-height: 60px;">
                <el-button size="small" @click="backToHome" type="primary">返回主页面</el-button>
            </div></el-col> -->
            <el-col :span="24"><div>
                <h3>用户管理</h3>
            </div></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="2"><div style="line-height: 30px;">
                账号：
            </div></el-col>
            <el-col :span="4"><div>
                <el-input size="small" v-model="phone"></el-input>
            </div></el-col>
            <el-col :span="2"><div style="line-height: 30px;">
                姓名：
            </div></el-col>
            <el-col :span="4"><div>
                <el-input size="small" v-model="name"></el-input>
            </div></el-col>
            <el-col :span="1"><div>
                <el-button size="small" @click="getUserList" type="primary">查询</el-button>
            </div></el-col>
            <el-col :span="1" :offset="8"><div>
                <el-button size="small" type="primary" @click="addUser">新增审核员</el-button>
            </div></el-col>
        </el-row>
        <div style="height: 30px;"></div>
        <el-table
            :data="userList"
            stripe
            style="width: 100%">
            <el-table-column
            prop="name"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="type"
            label="用户类型">
                <template slot-scope="scope">
                    <span>{{ 'admin' === scope.row.type ? '管理员':'auditors' === scope.row.type ? '审核员' : '用户'}}</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="gender"
            label="性别">
            </el-table-column>
            <el-table-column
            prop="birthday"
            label="出生日期">
            </el-table-column>
            <el-table-column
            prop="phone"
            label="电话号码">
            </el-table-column>
            <el-table-column
            prop="img"
            label="用户头像">
                <template slot-scope="scope">
                    <img v-if="scope.row.img.length > 0" :src="imgUrl+scope.row.img" style="height: 50px;width: 50px;" />
                </template>
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-popconfirm title="确认删除该用户吗？" @confirm="deleteUser(scope.row.id)">
                    <el-button type="danger" slot="reference" size="small" v-if="scope.row.type !== 'admin'">删除</el-button>
                </el-popconfirm>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="changeCurrent"></el-pagination>
        <Login :dialog-visible="loginShow" @closeLoginDialog="closeLoginDialog" @reloadData="reloadData"></Login>
        <el-dialog title="新增审核员" :visible.sync="dialogVisible" width="30%">
            <span>
                <el-form ref="userform" :model="userForm" :rules="rules" label-width="80px" >
                    <el-form-item label="用户姓名" prop="name">
                        <el-input v-model="userForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="用户性别" prop="gender" style="text-align: left;">
                        <el-radio-group v-model="userForm.gender">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="上传头像" prop="img" style="text-align: left;">
                        <el-upload
                            class="avatar-uploader"
                            :limit="1"
                            action="http://120.26.2.5:15400/upload/file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="userForm.img.length > 0" :src="imgUrl + userForm.img" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="userForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="userForm.birthday" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="账户密码" prop="password">
                        <el-input type="password" v-model="userForm.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%;background-color: #BDCEFC;color: white;border-radius: 20px;border: none;" type="primary" @click="signUser">添加</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { deleteUser, listUser,signUser } from '@/api/api'
import Login from '@/components/Login.vue'
export default {
    components:{
        Login   
    },
    data(){
        return {
            imgUrl: '',
            dialogVisible: false,
            loginShow: false,
            current: 1,
            size: 10,
            pages: 0,
            total: 0,
            phone: '',
            name: '',
            userList: [],
            userForm: {
                birthday: '',
                gender: '男',
                img: '',
                name: '',
                password: '',
                phone: '',
                type: 'auditors'
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输出电话号码', trigger: 'blur' }
                ],
                birthday: [
                    { required: true, message: '请输入出生日期', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入账户密码', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        const that = this
        that.imgUrl = that.$store.state.imgUrl
        if(localStorage.getItem('userType') !== null && localStorage.getItem('userType')  === 'admin'){
            this.getUserList()
        }else{
            this.loginShow = true
        }
    },
    methods:{
        reloadData:function(){
            this.getUserList()
        },
        getUserList:function(){
            listUser({
                current: this.current,
                size: this.size,
                phone: this.phone,
                name: this.name
            }).then(res => {
                this.total = res.data.total
                this.userList = res.data.records
            })
        },
        changeCurrent:function(current){
            this.current = current
            this.getUserList()
        },
        closeLoginDialog:function(){
            const that = this
            that.loginShow = false
        },
        backToHome:function(){
            this.$router.push('/')
        },
        deleteUser:function(id){
            deleteUser(id).then(res => {
                this.getUserList()
            })
        },
        signUser:function(){
            const that = this
            this.$refs['userform'].validate((valid) => {
                if (valid) {
                    if(that.userForm.img.length <= 0){
                        that.$message({
                            message: '请上传用户头像',
                            type: 'error'
                        })
                        return
                    }
                    console.log(that.userForm)
                    signUser(that.userForm).then(res => {
                        this.$message({
                            message: res.data,
                            type: res.status === 200 ? 'success':'warning'
                        })
                        if(res.status === 200){
                            this.dialogVisible = false
                            this.getUserList()
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        handleAvatarSuccess(res, file) {
            const that = this
            that.userForm.img = res
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        addUser:function(){
            this.dialogVisible = true
        }
    }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dotted #525151;
    border-radius: 6px;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>